<template>
	<view class="container">
		<view class="bg-board">
			<image mode="aspectFill" class="bg" src="@/static/images/splash/welcome.png" />
			<image class="moon" src="@/static/images/splash/moon.png" />
			<image class="bird" src="@/static/images/splash/bird.png" />
		</view>
		<view class="text-board">
			<view class="title">欢迎来到睡前故事</view>
			<view class="desc">探索新的睡眠方式，提供音乐和故事为您优质的睡眠提供完美的条件。</view>
		</view>

		<view class="btn" @click="onBtnClick" style="">
			立即开始
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				routerTimer:null
			}
		},
		onLoad(){
			this.logins()
			
		},
		methods:{
			logins(){
				uniCloud.callFunction({
					name:'login'
				}).then(res=>{
					console.log(res);
					 this.routerTimer=setTimeout(()=>{
						uni.navigateTo({
							url:'../index/index'
						})
					},2 *  1000)
				})
			},
			onBtnClick(){
					if (this.routerTimer) {
					      clearTimeout(this.routerTimer);
					    }
						uni.navigateTo({
							url:'../index/index'
						})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.container {
	  position: fixed;
	  width: 100%;
	  height: 100%;
	  background-color: #03174C;
	  
	  
	  .bg-board .bg {
	  	z-index: -1;
	  	width: 100%;
	  	height: 100%;
	  }
	  
	  .bg-board .moon {
	  	top: 37rpx;
	  	left: 163rpx;
	  	width: 126rpx;
	  	height: 126rpx;
	  }
	  
	  .bg-board .bird {
		  position: fixed;
	  	top: calc(100vh / 2.6);
		right: 0;
	  	width: 668rpx;
	  	height: 417rpx;
	  }
	  
	  /* title */
	  .text-board {
	  	display: flex;
	  	flex-direction: column;
	  	align-items: center;
	  	position: absolute;
	  	top: 225rpx;
	  	width: 100%;
	  }
	  
	  .text-board .title {
	  	font-size: 44rpx;
	  	color: #e6e7f2;
	  }
	  
	  .text-board .desc {
	  	width: 484rpx;
	  	height: auto;
	  	text-align: center;
	  	margin-top: 30rpx;
	  	font-size: 28rpx;
	  	color: #98a1bd;
	  }
	  
	  /* btn */
	  .btn {
	  	display: flex;
	  	justify-content: center;
	  	align-items: center;
	  	position: fixed;
	  	left: 65rpx;
		bottom: 100rpx;
	  	width: 620rpx;
	  	height: 100rpx;
	  	border-radius: 100rpx;
	  	font-size: 30rpx;
	  	background-color: #8e97fd;
	  	color: #f6f1fb;
	  }
	}
	

</style>
